// 导入Vue 构造函数
import Vue from 'vue'
// 导入VueX 构造函数
import Vuex from 'vuex'
// 导入全局 getters
import getters from './getters'

// 导入3个子模块
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'

// 导入让 vuex 数据持久化的插件
import createPersisitedState from 'vuex-persistedstate'
Vue.use(Vuex)

const store = new Vuex.Store({
  // 注册3个子模块（采用对象简写语法）
  modules: {
    app,
    settings,

    user
  },
  getters,
  // token为什么同时用vuex和本地存储共同管理？
  // 1.响应式 2.读写速度快 3.刷新不丢失

  // 存储在vuex中数据的好处？
  // 优点：
  // 1.响应式
  // 2.读取速度快（从内存中直接读写）
  // 缺点：1.数据不持久化，刷新后会丢失

  // 存储在localStorage中数据的优劣？
  // 优点： 刷新不丢失
  // 缺点： 1.非响应式  2.读写速度慢（从磁盘中读取，操作文件慢）
  // getters = {
  //   sidebar: state => state.app.sidebar,
  //   device: state => state.app.device,
  //   token: state => state.user.token,
  //   avatar: state => state.user.avatar,
  //   name: state => state.user.name
  // }
  plugins: [
    // 使用让 vuex 数据持久化的插件，传入配置
    createPersisitedState({
      // 本地存储名 -> localStorage.setItem('hrsass-23', vuex下的state数据)
      key: 'hrsass-23',
      // 哪些模块下的数据需要持久化
      // 使用这个插件的好处？
      // 1.自动把vuex中的数据同步到localStrorage一份
      // 2.当我们刷新页面的时候，自动的把localStorage的数据赋值给localStorage一份
      // 3.每当vuex中的数据发生变化，也会自动把最新的vuex数据同步到localStorage
      // 数据的使用方式
      // 1.代码中，我们都是从vuex中做数据增删改查（只用vuex中的数据）
      // 2.localStorage只负责刷新数据不丢失的任务
      paths: ['app', 'setttings', 'user']
    })
  ]
})

export default store
